<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<style type="text/css">
			
		</style>
	</ui:define>

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">DataGrid - Ajax</h1>
		<div class="entry">
		<p>DataGrid displays a collection of data in grid layout. Ajax Pagination is a built-in feature and paginator UI is fully customizable via various options like paginatorTemplate, rowsPerPageOptions, 
		pageLinks and more.</p>
		
			<h:form prependId="false">

				<p:dataGrid var="car" value="#{tableBean.cars}" columns="3"
					rows="12" paginator="true" effect="true"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="9,12,15">
					
					<p:column>
						<p:panel header="#{car.model}" style="text-align:center">
							<h:panelGrid columns="1" style="width:100%">
								<p:graphicImage value="/images/cars/#{car.manufacturer}.jpg"/> 
							
								<h:outputText value="#{car.year}" />
								
								<p:commandLink update="carDetail" oncomplete="carDialog.show()" title="View Detail" >
									<p:graphicImage value="/images/search.png"/> 
									<f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
								</p:commandLink>
							</h:panelGrid>
						</p:panel>
					</p:column>

				</p:dataGrid>
				
				<p:dialog header="Car Detail" widgetVar="carDialog" modal="true">
					<p:outputPanel id="carDetail" style="text-align:center;" layout="block">
					
						<p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
						
						<h:panelGrid  columns="2" cellpadding="5">
							<h:outputLabel for="modelNo" value="Model No: " />
							<h:outputText id="modelNo" value="#{tableBean.selectedCar.model}" />
							
							<h:outputLabel for="year" value="Year: " />
							<h:outputText id="year" value="#{tableBean.selectedCar.year}" />
							
							<h:outputLabel for="color" value="Color: " />
							<h:outputText id="color" value="#{tableBean.selectedCar.color}" style="color:#{tableBean.selectedCar.color}"/>
						</h:panelGrid>
					</p:outputPanel>
				</p:dialog>
			
			</h:form>

		<h3>Source</h3>
<p:tabView>
	<p:tab title="datagrid.xhtml">
		<pre name="code" class="xml">
&lt;h:form prependId="false"&gt;

	&lt;p:dataGrid var="car" value="\#{tableBean.cars}" columns="3"
		rows="12" paginator="true" effect="true"
		paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
		rowsPerPageTemplate="9,12,15"&gt;
		
		&lt;p:column&gt;
			&lt;p:panel header="\#{car.model}" style="text-align:center"&gt;
				&lt;h:panelGrid columns="1" style="width:100%"&gt;
					&lt;p:graphicImage value="/images/cars/\#{car.manufacturer}.jpg"/&gt; 
				
					&lt;h:outputText value="\#{car.year}" /&gt;
					
					&lt;p:commandLink update="carDetail" oncomplete="carDialog.show()" title="View Detail"&gt;
						&lt;p:graphicImage value="/images/search.png"/&gt; 
						&lt;f:setPropertyActionListener value="\#{car}" 
								target="\#{tableBean.selectedCar}" /&gt;
					&lt;/p:commandLink&gt;
				&lt;/h:panelGrid&gt;
			&lt;/p:panel&gt;
		&lt;/p:column&gt;

	&lt;/p:dataGrid&gt;
	
	&lt;p:dialog p:dialog header="Car Detail" widgetVar="carDialog" modal="true"&gt;
		&lt;p:outputPanel id="carDetail" style="text-align:center;" layout="block"&gt;
		
			&lt;p:graphicImage value="/images/cars/\#{tableBean.selectedCar.manufacturer}.jpg"/&gt;
			
			&lt;h:panelGrid  columns="2" cellpadding="5"&gt;
				&lt;h:outputLabel for="modelNo" value="Model No: " /&gt;
				&lt;h:outputText id="modelNo" value="\#{tableBean.selectedCar.model}" /&gt;
				
				&lt;h:outputLabel for="year" value="Year: " /&gt;
				&lt;h:outputText id="year" value="\#{tableBean.selectedCar.year}" /&gt;
				
				&lt;h:outputLabel for="color" value="Color: " /&gt;
				&lt;h:outputText id="color" value="\#{tableBean.selectedCar.color}" style="color:\#{tableBean.selectedCar.color}"/&gt;
			&lt;/h:panelGrid&gt;
		&lt;/p:outputPanel&gt;
	&lt;/p:dialog&gt;

&lt;/h:form&gt;
		</pre>
	</p:tab>
	
	<p:tab title="TableBean.java">
		<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.IOException;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.servlet.ServletContext;

import org.primefaces.examples.domain.Car;

public class TableBean implements Serializable {
	
	private final static String[] colors;
	
	private final static String[] manufacturers;
	
	static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";
		
		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}

	private List&lt;Car&gt; cars;
	
	private Car selectedCar;

	public TableBean() {
		cars = new ArrayList&lt;Car&gt;();
		
		populateRandomCars(cars, 50);
	}
	
	public Car getSelectedCar() {
		return selectedCar;
	}

	public void setSelectedCar(Car selectedCar) {
		this.selectedCar = selectedCar;
	}

	private void populateRandomCars(List&lt;Car&gt; list, int size) {
		for(int i = 0 ; i &lt; size ; i++)
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
	}

	public List&lt;Car&gt; getCars() {
		return cars;
	}

	private int getRandomYear() {
		return (int) (Math.random() * 50 + 1960);
	}
	
	private String getRandomColor() {
		return colors[(int) (Math.random() * 10)];
	}
	
	private String getRandomManufacturer() {
		return manufacturers[(int) (Math.random() * 10)];
	}
	
	private String getRandomModel() {
		return UUID.randomUUID().toString().substring(0, 8);
	}
}
		</pre>
	</p:tab>
</p:tabView>
		
		</div>
				
	</ui:define>
</ui:composition>